<template>
    <div class="global">
        <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

                <el-breadcrumb-item>消息中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="shouye">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="回复我的" :name="0">
                    <div v-for="item in list" class="list">
                        {{ item.sendNickName }}对我的文章【{{ item.articleTitle }}】进行了评论

                    </div>
                </el-tab-pane>
                <el-tab-pane label="点赞消息" :name="1">
                    <div v-for="item in list" class="list">
                        {{ item.sendNickName }}对我的文章【{{ item.articleTitle }}】进行了点赞

                    </div>
                </el-tab-pane>
                <el-tab-pane label="赞了我的评论" :name="3">
                    <div v-for="item in list" class="list">
                        {{ item.sendNickName }}对我的文章【{{ item.articleTitle }}】进行了评论点赞

                    </div>
                </el-tab-pane>
                <el-tab-pane label="系统消息" :name="4">
                    <div v-for="item in list" class="list">
                        {{ item.sendNickName }}的系统消息

                    </div>
                </el-tab-pane>


            </el-tabs>
            <div style="padding: 10px;box-sizing: border-box;">
            <el-pagination style="margin-top: 10px; " :current-page="pageNo" @current-change="handleCurrentChange"
                background layout="prev, pager, next" :total="total" />
        </div>
        </div>

    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import service from '../utils/request';
const route = useRoute();
const pageNo=ref(1)
const total=ref(0);
const activeName = ref(0);
onMounted(() => {
    activeName.value = Number(route.query.index)
    getlist(route.query.index)
})
const list = ref([]);
const handleClick = (e) => {
pageNo.value=1
    console.log(e.index)
    console.log(activeName.value)
    getlist(e.index)
}
const handleCurrentChange=(e)=>{
pageNo.value=e;
getlist(activeName.value)
}
const getlist = async (e) => {
    let item = "";
    if (e == 0) {
        item = "reply"
    }
    if (e == 1) {
        item = "likePost"
    }
    if (e == 2) {
        item = "likeComment"
    }
    if (e == 3) {
        item = "sys"
    }
    const res = await service.get("/user/loadmessage", {
        params: {
            code: item,
            pageNo: pageNo.value
        }
    });
    console.log(res)
    list.value = res.data.records
    total.value=res.data.total

}


</script>
<style scoped>
.global {
    width: 70%;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

.shouye {
    background: #fff;
}

.list {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
}
</style>